<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增玩家信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .stat-row {margin: 16px 0; font-weight: bold;}
        .stat-row span {margin-right: 32px;}
        .stat-row .export-btn {float: right; margin-right: 0;}
    </style>
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <!-- 查询筛选表单 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search" @submit.prevent="onSearch">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select">
                                    <option v-for="(item,index) in services" :value="item.server_id" :selected="index==0">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                
                
                  
                        <div class="layui-inline">
                            <label class="layui-form-label">时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createTimeBegin" id="createTime0" placeholder="开始时间" autocomplete="off" class="layui-input" />
                                <input type="text" name="createTimeEnd" id="createTime1" placeholder="截止时间" autocomplete="off" class="layui-input" />
                            </div>
                            <div class="layui-input-inline" style="width:auto;">
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-today">今日</button>
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-yesterday">昨日</button>
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-7days">近7日</button>
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-30days">近30日</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                        <div class="layui-inline" style="float:right;">
                            <button type="button" class="layui-btn layui-btn-primary" @click="exportData">导出数据</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <!-- 统计数据 -->
        <div class="stat-row">
            <span>新增激活设备：{{ statData.activeDevice }}</span>
            <span>新增有效设备：{{ statData.validDevice }}</span>
            <span>新增账号：{{ statData.account }}</span>
            <span>新增角色：{{ statData.role }}</span>
            <span>玩家转化率：{{ statData.rate }}%</span>
            <button type="button" class="layui-btn layui-btn-primary export-btn" @click="exportData">导出数据</button>
        </div>
        <!-- 数据表格 -->
        <table class="layui-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>新增激活设备</th>
                    <th>新增有效设备</th>
                    <th>新增账号</th>
                    <th>新增角色</th>
                    <th>玩家转化率</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in tableData" :key="row.date">
                    <td>{{ row.date }}</td>
                    <td>{{ row.activeDevice }}</td>
                    <td>{{ row.validDevice }}</td>
                    <td>{{ row.account }}</td>
                    <td>{{ row.role }}</td>
                    <td>{{ row.rate }}%</td>
                </tr>
                <tr v-if="tableData.length === 0">
                    <td colspan="6" style="text-align:center;">暂无数据</td>
                </tr>
            </tbody>
        </table>
        <div style="margin-bottom:16px;">
            <select v-model="limit" @change="changeLimit" style="margin-right:8px;">
                <option v-for="n in [10,20,50,100]" :value="n">{{n}}条</option>
            </select>
            条记录（共计{{ total }}条）
        </div>
        <div id="pagination"></div>
        <!-- 首次游戏时长表格 -->
        <div style="margin-top:32px;">
            <div style="font-weight:bold;margin-bottom:8px;">首次游戏时长</div>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>首次游戏时长</th>
                        <th>玩家人数</th>
                        <th>占比</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row in firstPlayRows" :key="row.label">
                        <td>{{ row.label }}</td>
                        <td>{{ row.count }}</td>
                        <td>{{ row.rate }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script src="/js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            services: JSON.parse(localStorage.getItem('services')),
            statData: {
                activeDevice: 9999,
                validDevice: 99999,
                account: 99999,
                role: 99999,
                rate: 99.99
            },
            tableData: [],
            total: 1000,
            page: 1,
            limit: 10,
            firstPlayRows: [
                { label: '1分钟以内', count: 9999, rate: '99.99' },
                { label: '1-3分钟', count: 9999, rate: '99.99' },
                { label: '3-10分钟', count: 9999, rate: '99.99' },
                { label: '10-30分钟', count: '', rate: '' },
                { label: '30分钟以上', count: '', rate: '' }
            ],
            lastQuery: {}
        },
        methods: {
            onSearch() {
                // 获取表单内容
                var formData = layui.form.val('table-search');
                this.lastQuery = formData;
                this.page = 1;
                this.fetchData(1, formData);
            },
            fetchData(page = 1, query) {
                var _this = this;
                var params = Object.assign({}, query || {}, {
                    page: page,
                    limit: this.limit
                });
                $.ajax({
                    url: '/admin/gameRoleNewInfo/detail',
                    type: 'GET',
                    dataType: 'json',
                    data: params,
                    success: function(res) {
                        // 兼容后端常见返回结构 {code,msg,data}
                        var data = res && (res.data || res) || {};
                        _this.statData = data.statData || {};
                        _this.firstPlayRows = data.firstPlayRows || [];
                        var rows = data.newUserRows || [];
                        _this.tableData = rows;
                        _this.total = Number(data.total || data.count || rows.length || 0);
                        _this.renderPage();
                    },
                    error: function() {
                        layer.msg('数据加载失败');
                    }
                });
            },
            renderPage() {
                var _this = this;
                layui.use('laypage', function() {
                    layui.laypage.render({
                        elem: 'pagination',
                        count: _this.total,
                        limit: _this.limit,
                        curr: _this.page,
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                        jump: function(obj, first) {
                            if (!first) {
                                _this.page = obj.curr;
                                _this.limit = obj.limit;
                                _this.fetchData(obj.curr, _this.lastQuery);
                            }
                        }
                    });
                });
            },
            changeLimit() {
                this.page = 1;
                this.fetchData(1, this.lastQuery);
            },
            exportData() {
                // 导出，沿用当前查询条件
                var query = Object.assign({}, this.lastQuery || {}, {
                    page: this.page,
                    limit: this.limit,
                    export: 1
                });
                var qs = Object.keys(query).filter(function(k){ return query[k] !== undefined && query[k] !== null; }).map(function(k){
                    return encodeURIComponent(k) + '=' + encodeURIComponent(query[k]);
                }).join('&');
                window.open('/admin//gameRoleNewInfo/detail' + (qs ? ('?' + qs) : ''));
            }
        },
        mounted() {
            var _this = this;
            layui.use(['form', 'laydate'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#createTime0',
                     type:'datetime',
                    value: getYmd(0)+ " 00:00:00"
                });
                laydate.render({
                    elem: '#createTime1',
                         type:'datetime',
                    value: getYmd(1)+ " 00:00:00"
                });
                // 快捷时间按钮
                $('#btn-today').on('click', function() {
                    var today = '2024-12-08';
                    $('[name=createTimeBegin]').val(today + ' 00:00:00');
                    $('[name=createTimeEnd]').val(today + ' 23:59:59');
                });
                $('#btn-yesterday').on('click', function() {
                    var yest = '2024-12-07';
                    $('[name=createTimeBegin]').val(yest + ' 00:00:00');
                    $('[name=createTimeEnd]').val(yest + ' 23:59:59');
                });
                $('#btn-7days').on('click', function() {
                    var start = '2024-12-02';
                    var end = '2024-12-08';
                    $('[name=createTimeBegin]').val(start + ' 00:00:00');
                    $('[name=createTimeEnd]').val(end + ' 23:59:59');
                });
                $('#btn-30days').on('click', function() {
                    var start = '2024-11-09';
                    var end = '2024-12-08';
                    $('[name=createTimeBegin]').val(start + ' 00:00:00');
                    $('[name=createTimeEnd]').val(end + ' 23:59:59');
                });
                form.render();
            });
            // 使用表单默认值进行首次查询
            var initQuery = layui.form.val('table-search') || {};
            this.lastQuery = initQuery;
            this.fetchData(1, initQuery);
        }
    });
</script>
</body>
</html>